<template>
  <div class="ad-manage-container">
    <el-card class="form-card" shadow="hover">
      <div class="card-header">
        <h2 class="title">广告管理</h2>
        <p class="tip-text">配置您希望展示的广告内容与素材</p>
      </div>

      <el-form
          :model="form"
          label-width="120px"
          label-position="left"
          class="elegant-form"
      >
        <el-form-item label="广告文案" class="form-item">
          <el-input
              type="textarea"
              :rows="4"
              v-model="form.content"
              placeholder="请输入广告文案（支持换行，可使用Emoji表情）"
              class="custom-textarea"
              resize="none"
          ></el-input>
          <div class="input-tip">建议文字长度在50-200字之间</div>
        </el-form-item>

        <el-form-item label="广告素材" class="form-item">
          <div class="upload-section">
            <div class="preview-area">
              <template v-if="form.imageUrl">
                <div class="image-preview">
                  <el-image
                      :src="form.imageUrl"
                      fit="cover"
                      class="preview-image"
                  >
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </el-image>
                  <div class="current-tip">当前使用图片</div>
                </div>
              </template>
              <div class="upload-tips">
                <p class="tip">支持 JPG/PNG 格式，建议尺寸 1200×600px</p>
                <p class="tip">文件大小不超过 2MB</p>
              </div>
            </div>
            <el-upload
                :action="$baseUrl + '/files/upload'"
                :headers="{ token: user.token }"
                :on-success="handleAdSuccess"
                :show-file-list="false"
                class="image-uploader"
            >
              <el-button
                  type="primary"
                  icon="el-icon-upload"
                  class="upload-button"
              >更换图片</el-button>
            </el-upload>
          </div>
        </el-form-item>

        <el-form-item class="action-buttons">
          <el-button
              type="primary"
              @click="save"
              class="submit-btn"
          >保存配置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Advertisement',
  data() {
    return {
      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
      form: {}
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      this.$request.get('/admin/ad').then(res => {
        this.form = res.data || {}
      })
    },
    handleAdSuccess(res) {
      this.form.imageUrl = res.data
    },
    save() {
      this.$request.put('/admin/ad', this.form).then(() => {
        this.$message.success('配置已保存')
        this.loadData()
      })
    }
  }
}
</script>

<style scoped>
.ad-manage-container {
  padding: 24px;
  background: #f5f7fa;
  min-height: 100vh;
}

.form-card {
  max-width: 800px;
  margin: 0 auto;
  border-radius: 12px;
}

.card-header {
  margin-bottom: 32px;
}
.card-header .title {
  color: #303133;
  font-size: 20px;
  margin-bottom: 8px;
}
.card-header .tip-text {
  color: #909399;
  font-size: 14px;
}

.elegant-form .el-form-item__label {
  color: #606266;
  font-weight: 500;
}
.elegant-form .form-item {
  margin-bottom: 28px;
}

.custom-textarea .el-textarea__inner {
  font-size: 14px;
  line-height: 1.6;
  border-radius: 6px;
  padding: 12px;
  color: #606266;
}
.custom-textarea .el-textarea__inner::placeholder {
  color: #c0c4cc;
}

.input-tip {
  color: #909399;
  font-size: 12px;
  margin-top: 6px;
}

.upload-section .preview-area {
  margin-bottom: 16px;
}
.upload-section .image-preview {
  position: relative;
  display: inline-block;
}
.upload-section .preview-image {
  width: 200px;
  height: 100px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}
.upload-section .preview-image:hover {
  transform: translateY(-3px);
}
.upload-section .current-tip {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.6);
  color: white;
  font-size: 12px;
  text-align: center;
  padding: 4px;
  border-radius: 0 0 6px 6px;
}
.upload-section .upload-tips {
  margin-top: 8px;
}
.upload-section .tip {
  color: #909399;
  font-size: 12px;
  line-height: 1.5;
  margin: 4px 0;
}

.upload-button {
  padding: 10px 20px;
  border-radius: 20px;
  font-weight: 500;
}

.action-buttons {
  margin-top: 32px;
  text-align: right;
}
.submit-btn {
  padding: 12px 32px;
  font-size: 14px;
  letter-spacing: 0.5px;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(24,144,255,0.3);
}
</style>